<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D正方体</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: black;
		}
		div {
			perspective: 500px;
		}
		ul{
			width: 200px;
			height: 200px;
			/* margin: 100px 100px; */
			/* border: 1px solid black; */
			position: relative;
			transform-style: preserve-3d;
		}
		.one ul{
			animation: move1 20s linear 0s infinite;
		}
		.two ul{
			animation: move2 12s linear 0s infinite;
		}
		 ul:hover{
			animation-play-state: paused;
		}
		@-webkit-keyframes move1 {
			from { 
				transform: rotateX(0deg) rotateY(360deg);
			 }
			 50%{
			 	transform: rotateX(-90deg) rotateY(-270deg);
			 }
			to {
				transform: rotateX(360deg) rotateX(0deg); 
			}	
		}
		@keyframes move2 {
			from{
				transform: rotateX(360deg) rotateY(0deg);
			}
			50%{
				transform: rotateX(90deg) rotateY(-180deg);
			}
			to{
				transform: rotateX(0deg) rotateY(360deg);
			}
		}
		ul li{
			list-style: none;
			width: 200px;
			height: 200px;
			top: 0;
			left: 0;
			position: absolute;
			text-align: center;
			line-height: 200px;
			font-size: 80px;
		}
		ul li:nth-child(1) {
			background-color: red;
			transform: rotateX(90deg) translateZ(100px);
		}
		ul li:nth-child(2) {
			background-color: purple;
			transform: rotateX(180deg) translateZ(100px);
		}
		ul li:nth-child(3) {
			background-color: blue;
			transform: rotateX(270deg) translateZ(100px);
		}
		ul li:nth-child(4) {
			background-color: green;
			transform: rotateX(360deg) translateZ(100px);
		}
		ul li:nth-child(5) {
			background-color: yellow;
			transform: rotateY(-90deg) translateZ(100px);
		}
		ul li:nth-child(6) {
			background-color: pink;
			transform: rotateY(90deg) translateZ(100px);
		}
		div{
			display: inline-block;
			margin: 100px;
		}
		.one{
			margin-left: 200px;
		}
		.two ul li{
			opacity: 0.5;
		}
		img{
			width: 200px;
			height: 200px;
		}
		
	</style>
</head>
<body>

<div class="one">
	<ul>
		<li><img src="../images/5.jpg" alt=""></li>
		<li><img src="../images/6.jpg" alt=""></li>
		<li><img src="../images/7.jpg" alt=""></li>
		<li><img src="../images/8.jpg" alt=""></li>
		<li><img src="../images/9.jpg" alt=""></li>
		<li><img src="../images/10.jpg" alt=""></li>
	</ul>
</div>
<div class="two">
	<ul>
		<li>1'</li>
		<li>2'</li>
		<li>3'</li>
		<li>4'</li>
		<li>5'</li>
		<li>6'</li>
	</ul>
</div>
</body>
</html>

	
